<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="5.5">
        <el-input v-model="inputId" clearable placeholder="修改订单号并输入后回车进行查询"
                  @change="getInfoById(inputId)">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-select v-model="minPrice" placeholder="请选择最小价格">
          <el-option
            v-for="item in minPriceItems"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="0.5" style="margin-top: 10px">
        ~
      </el-col>
      <el-col :span="3">
        <el-select v-model="maxPrice" placeholder="请选择最大价格">
          <el-option
            v-for="item in maxPriceItems"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-input
          v-model="fuzzySearch"
          placeholder="模糊搜索房屋描述"
          @change="getHouseRentInfo"
        >
          <el-select style="width: 140px" v-model="selectedType" slot="prepend" placeholder="输入房屋出租类型">
            <el-option v-for="selectItem in selectTypeItems"
                       :key="selectItem"
                       :label="selectItem"
                       :value="selectItem"></el-option>
          </el-select>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary"
                   plain
                   round
                   @click="getHouseRentInfo"
        >{{ bottoninfo }}</el-button>
        <el-button type="primary"
                   plain
                   round
                   @click="clear"
        >清空</el-button>
      </el-col>
    </el-row>
    <el-table
    v-loading="loading"
    :data="tableItems"
    border
    stripe
    style="width: 100%"
    max-height="600px"
  >
    <el-table-column
      type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="table-expand">
          <el-form-item label="出租房屋id">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <br>
          <el-form-item label="房屋所有者名字">
            <span>{{ props.row.hostRoughVo.name }}</span>
          </el-form-item>
          <br>
          <el-form-item label="出租类型">
            <span>{{ props.row.type }}</span>
          </el-form-item>
          <br>
          <el-form-item label="价格">
            <span>{{ props.row.price }}</span>
          </el-form-item>
          <br>
          <el-form-item label="标签">
            <span>{{ props.row.tag }}</span>
          </el-form-item>
          <br>
          <el-form-item label="距离">
            <span>{{ props.row.distance}}</span>
          </el-form-item>
          <br>
          <el-form-item label="面积">
            <span>{{ props.row.area }}</span>
          </el-form-item>
          <br>
          <el-form-item label="客厅数量">
            <span>{{ props.row.livingRoomAmount }}</span>
          </el-form-item>
          <br>
          <el-form-item label="卧室数量">
            <span>{{ props.row.bedroomAmount }}</span>
          </el-form-item>
          <br>
          <el-form-item label="床数量">
            <span>{{ props.row.bedAmount }}</span>
          </el-form-item>
          <br>
          <el-form-item label="卫生间">
            <span>{{ props.row.toiletAmount }}</span>
          </el-form-item><br>
          <el-form-item label="房客数量">
            <span>{{ props.row.roomerAmount }}</span>
          </el-form-item><br>
          <el-form-item label="房屋描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item><br>
          <el-form-item label="详细介绍">
            <span>{{ props.row.intro }}</span>
          </el-form-item><br>
          <span v-for="(value,index) in props.row.pictureUrl.split(',')" :key="index">
            <img :src="value">
          </span>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      prop="id"
      label="出租单号"
      width="150"
    >
    </el-table-column>
    <el-table-column
      prop="hostRoughVo.name"
      label="房屋所有者名字"
      width="120">
    </el-table-column>
    <el-table-column
      prop="type"
      label="出租类型"
      width="120">
    </el-table-column>
      <el-table-column
        prop="location"
        label="详细地址"
        width="120">
      </el-table-column>
      <el-table-column
      prop="price"
      label="价格"
      width="60">
    </el-table-column>
    <el-table-column
      prop="hostRoughVo.phone"
      label="房东联系方式"
      width="120">
    </el-table-column>
    <el-table-column
      prop="area"
      label="面积(平方)"
      width="120">
    </el-table-column>
    <el-table-column
      prop="desc"
      label="房屋描述"
      width="150">
    </el-table-column>
      <el-table-column
        prop="intro"
        label="详细介绍"
        width="150">
      </el-table-column>
    <el-table-column
      prop="ra_state"
      label="审核状态"
      width="100">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
          <el-tag size="medium" effect="dark"
                  :type="scope.row.check===1?'success':(scope.row.check==0?'':'danger')"
          >
            {{ scope.row.check===1?'已派单':(scope.row.check===0?'未处理':'被退回') }}
          </el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="200">
      <template slot-scope="scope">
        <div v-if="scope.row.ra_state!==1">
          <el-button @click="changeStatus(scope.row.id,1)" type="text" size="small">通过</el-button>
          <el-button
            :disabled="scope.row.ra_state===-1?true:false"
            type="text"
            size="small"
            @click="changeStatus(scope.row.id,2)"
          >退回</el-button>
          <el-button
            type="text"
            size="small"
            @click="houseRentInfoManage(scope.row)"
          >信息管理</el-button>
        </div>
        <div v-if="scope.row.ra_state===1">
          <el-button
            type="text"
            size="small"
            @click="ShowSearchRepairApply(scope.row.ra_id)">查看</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
  name: 'HouseRental',
  methods: {
    getInfoById (input) {
      if (input === '') return
      this.loading = true
      this.$axios({
        baseURL: 'http://121.5.115.174/houseRent/detail/' + input,
        method: 'GET'
      }).then(successResponse => {
        this.tableItems = []
        this.tableItems.push(successResponse.data.data)
        console.log(this.tableItems)
        this.$message.success('id查询成功')
      }).catch(failResponse => {
        this.$message.error('从服务器获取租房信息失败')
      })
      this.loading = false
    },
    getHouseRentInfo () {
      this.loading = true
      this.$axios.get('houseRent/detailList').then(successResponse => {
        this.tableItems = successResponse.data.data
        console.log(this.tableItems.data)
        this.$message.success('查询所有信息成功')
      }).catch(failResponse => {
        this.$message.error('失败')
      })
      this.loading = false
    },
    houseRentInfoManage (info) {
      this.$router.push({
        path: '/HousingBasicInformationManagement',
        name: 'housingBasicInformationManagement',
        params: {
          HouseRentDetailVo: info
        }
      })
    },
    changeStatus (id, status) {
      this.$axios.get(`houseRent/changeCheck/${id}/${status}`)
        .then(successResponce => {
          for (let i = 0; i < this.tableItems.length; i++) {
            if (this.tableItems[i].id === id) {
              this.tableItems[i].check = status
            }
          }
        }).catch(failResponce => {
          this.$message.error('更新失败')
        })
    }
  },
  data () {
    return {
      bottoninfo: '查询所有',
      minPriceItems: [],
      maxPriceItems: [],
      minPrice: '',
      maxPrice: '',
      inputId: '',
      selectedType: '',
      selectTypeItems: ['整租', '合租', '长租', '短租'],
      fuzzySearch: '',
      props: [],
      loading: false,
      tableItems: []
    }
  },
  mounted () {
    for (let i = 0; i < 10; i++) {
      this.minPriceItems.push(i * 1000)
    }
  },
  watch: {
    minPrice: function (New) {
      this.maxPrice = ''
      for (let i = New / 1000; i < 10; i++) {
        this.maxPriceItems.push(i * 1000)
      }
    },
    maxPrice: function (New) {
      if (New === '') {
        return
      }
      this.loading = true
      this.$axios.get(`houseRent/detailList/${this.minPrice}/${this.maxPrice}`).then(successResponse => {
        this.tableItems = successResponse.data.data
        this.$message.success('按照价格查询成功')
      }).catch(failResponse => {
        this.$message.error('失败')
      })
      this.loading = false
    },
    selectedType: function (New) {
      if (New === '') return
      this.loading = true
      this.$axios({
        baseURL: `https://www.zjutleo.cn/village/api/houseRent/roughList?type=` + New,
        method: 'get',
        header: {
          'Content-Type': 'text/html; charset=utf-8'
        }
      }).then(successResponse => {
        this.tableItems = successResponse.data.data
        this.$message.success('按照类型查询成功')
      }).catch(failResponse => {
        this.$message.error('失败')
      })
      this.loading = false
    },
    fuzzySearch: function (New) {
      if (New === '') return
      this.loading = true
      this.$axios
        .get(`houseRent/fuzzySearch/${New}`)
        .then(successResponde => {
          this.tableItems = successResponde.data.data
          this.$message.success('模糊查询成功')
        }).catch(failResponse => {
          this.$message.error('模糊查询失败')
        })
      this.loading = false
    }
  }
}
</script>

<style scoped>

</style>
